<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>商品详情</title>
  <!--jquery-->
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <!-- bootstrap -->
  <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
  <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.js}"></script>
  <!-- layer -->
  <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
  <!-- common.js -->
  <script type="text/javascript" th:src="@{/js/common.js}"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: "Open Sans", sans-serif;
      text-transform: uppercase;
      letter-spacing: 3px;
      font-size: 11px;
    }
    body {
      /*background: #cbc0d3;*/
      background: #c9302c;
    }
    .main-header {
      width: 100%;
      height: 100px;
      /*background: #eac7cc;*/
      background: whitesmoke;
      display: block;
    }
    .navbar {
      display: inline-block;
      float: right;
      margin-right: 50px;
      margin-top: 30px;
    }
    .logo {
      display: inline-block;
      margin-top: 30px;
      margin-left: 30px;
      text-decoration: none;
    }
    .logo-lg {
      font-size: 20px;
      font-weight: lighter;
      color: #232324;
    }
    .logo-lg > b {
      font-size: 20px;
      font-weight: lighter;
      color: #232324;
    }
    .container {
      background: #FFFFFF;
      margin-right: auto;
      margin-left: auto;
      width: 900px;
    }
    .captcha {
      display: none;
    }
    .captchaImg {
      display: none;
      width: 130px;
      height: 32px;
    }
  </style>
</head>
<body>
<!--抽取头部公共页面-->
<header id="site-header" class="main-header">
  <!-- Logo -->
  <a class="logo" onclick="toList()">
    <span class="logo-lg"><b>商品抢购</b></span>
  </a>
  <nav class="navbar navbar-static-top">
    <!-- Sidebar toggle button-->
    <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </a>
    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav">
        <li class="dropdown user user-menu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <img class="user-image" src="/imgs/user.png" height="32" alt="User
Image">
            <span class="hidden-xs"></span>
          </a>
          <ul class="dropdown-menu">
            <!-- User image -->
            <li class="user-header">
              <img class="img-circle" alt="User Image">
              <p>
                Hello ABC - Hello ABC
                <small>Hello ABC</small>
              </p>
            </li>
            <!-- Menu Body -->
            <li class="user-body">
            </li>
            <li class="user-footer">
              <div class="pull-middle">
                <a onclick="toOut()" class="btn btn-lg btn-default btn-block">退
                  出系统</a>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</header>
<div class="panel panel-default">
  <div class="panel-heading" style="background: #c9302c;color: white">秒杀商品详情</div>
  <div class="panel-body">
    <span th:if="${user eq null}"> 您还没有登录，请登陆后再操作<br/></span>
    <span>production 参数</span>
  </div>
  <div class="container">
    <table class="table" id="good">
      <tr>
        <td>名称</td>
        <td colspan="3" id="goodName" th:text="${goods.goodsName}"></td>
      </tr>
      <tr>
        <td>图片</td>
        <td colspan="3"><img id="goodImg" th:src="@{${goods.goodsImg}}" width="200" heights="200"/></td>
      </tr>

      <tr>
        <td>秒杀开始时间</td>
        <td id="startTime" th:text="${#dates.format(goods.startDate,'yyyy-MM-dd HH:mm:ss')}"></td>
        <td id="seckillTip">
          <input type="hidden" id="remainSeconds"
                 th:value="${remainSeconds}"/>
          <span th:if="${secKillStatus eq 0}">秒杀倒计时：<span id="countDown"
                                                          th:text="${remainSeconds}"> </span>秒</span>
          <span th:if="${secKillStatus eq 1}">秒杀进行中</span>
          <span th:if="${secKillStatus eq 2}">秒杀已结束</span>
        </td>
        <td>
<!--          <form id="secKillForm" method="post" action="/seckill/doSeckill">-->
<!--            <input type="hidden" id="goodsId" name="goodsId" th:value="${goods.id}">-->
<!--            <button class="btn btn-primary btn-block" type="submit" id="buyButton"> 抢 购-->
<!--            </button>-->
<!--          </form>-->
          <input type="hidden" id="goodsId" name="goodsId" th:value="${goods.id}">
          <button class="btn btn-primary btn-block" type="submit" onclick="getSecKillPath()"
                  id="buyButton">
            立即秒杀
          </button>
        </td>
      </tr>


      <tr>
        <td>秒杀价</td>
        <td id="secKillPrice" th:text="${goods.seckillPrice}"></td>
        <td>
          <img id="captchaImg" class="captchaImg"/></td>
        <td>
          <input id="captcha" class="captchaImg"/>
          <input type="button" id="captchabtn" onclick="verifyCaptcha()" value="验证
输入的验证码是否正确">
        </td>
      </tr>
      <tr>
        <td>原价</td>
        <td colspan="3" id="goodPrice" th:text="${goods.goodsPrice}"></td>
      </tr>
      <tr>
        <td>库存</td>
        <td colspan="3" id="stockCount" th:text="${goods.stockCount}"></td>
      </tr>
    </table>
  </div>
</div>
</body>

<script>
  $(function () {
    countDown();
  });
  function countDown() {
    var remainSeconds = $("#remainSeconds").val();
    var timeout;
//秒杀还未开始
    if (remainSeconds > 0) {
      $("#buyButton").attr("disabled", true);
      timeout = setTimeout(function () {
        $("#countDown").text(remainSeconds - 1);
        $("#remainSeconds").val(remainSeconds - 1);
        countDown();
      }, 1000);
    } else if (remainSeconds == 0) {//秒杀进行中
      $("#buyButton").attr("disabled", false);
      if (timeout) {//清空计时器
        clearTimeout(timeout);
      }
      $("#seckillTip").html("秒杀进行中");

      //在秒杀进行中的状态下, 请求验证码,并显示(默认情况下该验证码图片是不显示
      的)
      $("#captchaImg").attr("src", "/seckill/captcha?goodsId=" +
              $("#goodsId").val());
      $("#captchaImg").show();
//显示输入框
      $("#captcha").show();

    } else {
      $("#buyButton").attr("disabled", true);
      $("#seckillTip").html("秒杀已结束");
    }
  }

  function getSecKillPath() {
    var goodsId = $("#goodsId").val();
    $.ajax({
      url: "/seckill/path", type: "GET", data: {
        goodsId: goodsId, },success: function (data) {
        if (data.code == 200) {
//取出服务器返回的随机生成的路径
          var path = data.obj;
          doSecKill(path);
        } else {
          layer.msg(data.message);
        }
      },error: function () {
        layer.msg("客户端请求错误");
      }
    })
  }

  //携带秒杀生成的路径, 秒杀商品
  function doSecKill(path) {
    $.ajax({
//一定要注意路径的大小写问题,否则报 404
      url: '/seckill/' + path + '/doSeckill', type: 'POST', data: {
        goodsId: $("#goodsId").val()
      },success: function (data) {
        if (data.code == 200) {
          layer.msg("秒杀结果");
        } else {
          layer.msg(data.message);
        }
      },error: function () {
        layer.msg("客户端请求错误！", {time: 2000});
      }
    });
  }

</script>

</html>